<template>
  <view class="select-person">
    <view class="select-person-box">
      <view class="select-person-item">
        <!-- <text class="popup-con-title">选择联系人</text>
        <view class="selected-user">
          <view class="selected-text">
            <text>已选择</text>
          </view>
          <view class="selected-user-list">
            <view class="selected-user-img">
              <img
                v-for="selected in selecteduserList"
                :key="selected.id"
                :src="selected.avatar"
                alt=""
              />
            </view>
            <i class="iconfont icon-youjiantou1"></i>
          </view>
        </view> -->
        <view class="person-collapse">
          <view class="person-collapse-item">
            <nut-collapse
              v-model:active="activeName"
              @change="collapseChange"
            >
              <nut-collapse-item
                class="custom-arrow"
                v-for="userItm in userLists"
                :key="userItm.deptId"
                :name="userItm.deptId"
              >
                <template #title>
                  <view class="collapse-title">
                    <view class="collapse-title-text"
                      ><img
                        src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN016mTh8W1S9wNdzy4g4_!!1034622205.png"
                        alt=""
                      />
                      <view class="collapse-title-name"
                        >{{ userItm.deptName }}<text>({{ userItm.users.length }})</text></view
                      >
                    </view>

                    <i
                      class="iconfont icon-youjiantou1"
                      :class="{ active: userItm.isActiveName }"
                    ></i>
                  </view>
                </template>

                <view class="collapse-content">
                  <view class="collapse-content-item">
                    <img
                      class="sub-item-img"
                      src="https://img.alicdn.com/imgextra/i3/1034622205/O1CN01PeA7cb1S9wNYxRzHt_!!1034622205.png"
                      alt=""
                    />
                    <view class="collapse-content-list">
                      <view
                        class="collapse-content-list-item"
                        v-for="itm in userItm?.users"
                        :key="itm"
                      >
                        <nut-checkbox
                          v-model="itm.selectedChecked"
                          text-position="left"
                          :disabled="itm.disabled"
                          @click="selectedCheckedChange(itm)"
                        >
                          <img
                            class="user-img"
                            :src="itm.avatarUrls"
                            alt=""
                          />
                          <text>{{ itm.nickName }}</text>
                        </nut-checkbox>
                      </view>
                    </view>
                  </view>
                </view>
              </nut-collapse-item>
            </nut-collapse>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
const props = defineProps(["userList", "feedbackUsers", "disabledList", "isUserPopup", "isSingle"]);
const emit = defineEmits(["selecteduserList"]);
const activeName = ref(1);
const isActiveName = ref(false);
const userLists = ref([]);
const selecteduserList = ref([]);
const checkbox2 = ref(false);

watch(
  () => props.userList,
  val => {
    userLists.value = val;
    userLists.value?.map((item: { users: any; deptId: any; isActiveName: boolean; id: any }) => {
      item.users?.map((itm: { selectedChecked: boolean; id: any }) => {
        itm.selectedChecked = false;
      });
    });
    userLists.value?.map(item => {
      props.feedbackUsers?.forEach((itm: { users: any; deptId: any; isActiveName: boolean; id: any }) => {
        item.users?.map((itms: { selectedChecked: boolean; id: any }) => {
          if (itms.userId == itm.userId) {
            itms.selectedChecked = true;
          }
        });
      });
    });
    if (props.isUserPopup && props.disabledList) {
      console.log(props.disabledList, "props.disabledList");

      userLists.value?.map((item: { users: any; deptId: any; isActiveName: boolean; id: any }) => {
        item.users?.map((itm: { selectedChecked: boolean; id: any }) => {
          props.disabledList?.forEach((itms: { selectedChecked: boolean; id: any }) => {
            if (itms.userId == itm.userId) {
              itm.disabled = true;
            }
          });
        });
      });
      console.log(userLists.value, "userLists.value68888");
    }
  },
);
const collapseChange = (ids: any) => {
  userLists.value?.map((item: { users: any; deptId: any; isActiveName: boolean; id: any }) => {
    ids.forEach((id: any) => {
      item.isActiveName = item.deptId == id;
    });
  });
};
//
const selectedCheckedChange = (itm: { selectedChecked: boolean; id: any }) => {
  let newUserList = [];
  if (props.isUserPopup && props.disabledList) {
    userLists.value?.map((item: { users: any; deptId: any; isActiveName: boolean; id: any }) => {
      item.users?.map((itm: { selectedChecked: boolean; id: any }) => {
        props.disabledList.forEach((itms: { selectedChecked: boolean; id: any }) => {
          if (itms.userId == itm.userId) {
            itm.disabled = true;
          }
        });
      });
    });
  }
  userLists.value.forEach((item: { users: any; deptId: any; isActiveName: boolean; id: any }) => {
    item.users.forEach((itm: { avatarUrls: any; selectedChecked: boolean; id: any }) => {
      if (itm.selectedChecked) {
        newUserList.push(itm);
      }
    });
  });
  if (props.isSingle == true || props.isSingle == "true") {
    newUserList = itm.selectedChecked ? [itm] : [];
    if (itm.selectedChecked) {
      userLists.value.map(i => {
        i.users.map(it => {
          // item.userId除外的其他checked为false,选中的为true
          if (it.userId != itm.userId) {
            it.selectedChecked = false;
          }
        });
      });
    }
    if (itm.selectedChecked) {
      userLists.value.map(i => {
        i.users.map(it => {
          // item.userId除外的其他checked为false,选中的为true
          if (it.userId != itm.userId) {
            it.selectedChecked = false;
          }
        });
      });
    }
  }
  console.log(newUserList, "userLists.value68888");

  selecteduserList.value = JSON.parse(JSON.stringify(newUserList));
  emit("selecteduserList", JSON.parse(JSON.stringify(selecteduserList.value)));
};
onMounted(() => {});
</script>

<style lang="less">
@import "./index.less";
</style>
